<template >
  <div class="asset-container">
    <el-row>
      <el-breadcrumb separator=">">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>基础信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>资产分类</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-form label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="分类编码" label-width="80px">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分类名称" label-width="80px">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="success">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <div>
        <el-button-group>
          <el-button  @click="btnAddClick" type="success" icon="el-icon-edit">添加</el-button>
          <el-button type="success" icon="el-icon-share">修改</el-button>
          <el-button type="success" icon="el-icon-delete">删除</el-button>
        </el-button-group>
      </div>
      <el-table
      :data="tableData"
      border
      stripe
      style="width:100%">
      <el-table-column
      prop="classId"
      label="分类编码"
      width="180"
      sortable>
    </el-table-column>
      <el-table-column
        prop="className"
        label="分类名称">
      </el-table-column>
      <el-table-column
        prop="higherClass"
        label="上级分类">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="备注信息"
        width="180">
      </el-table-column>
    </el-table>
      <el-pagination
      small
      layout="prev,pager,next"
      :total="50">
      </el-pagination>
    </el-row>
    <el-dialog
      title="资产添加"

      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form>
        <el-form-group>
          <el-form-item label-width="80px" label="分类编码">
            <el-input v-model="asset.classId"/>
          </el-form-item>
          <el-form-item label-width="80px" label="分类名称">
            <el-input v-model="asset.className"/>
          </el-form-item>
            <el-form-item label-width="80px" label="上级分类">
              <el-input v-model="asset.higherClass"/>
            </el-form-item>
              <el-form-item label-width="80px" label="备注">
                <el-input v-model="asset.desc"/>
          </el-form-item>
        </el-form-group>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible=false">取消</el-button>
          <el-button type="primary" @click="submitHandle">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "asset",
      data(){
          return{
            tableData:[],
            dialogVisible:false,
            asset:{
              classId:'',
              className:'',
              higherClass:'',
              desc:''
            }
          }
      },
      mounted(){
          /*挂载结束之后*/
        var _this=this;
        this.axios({
          url:'http://localhost:3000/asset/list',
          method:'get'
        }).then(function (res) {
          _this.tableData=res.data;
        })
      },
      methods:{
          btnAddClick(){
            this.dialogVisible=true;
          },
        handleClose() {
          this.dialogVisible = false;
        },
        submitHandle(){
            var _this=this;
            this.axios({
              url:'http://127.0.0.1:3000/asset/add',
              method:'get',
              params:{
                classId:this.asset.classId,
                className:this.asset.className,
                higherClass:this.asset.higherClass,
                desc:this.asset.desc
              }
            }).then(function(res){
              if(res.data.flag){
                _this.tableData=res.data.asss;
                _this.$message('添加成功')
                _this.dialogVisible=false;
              }else {
                alert('添加失败')
              }
            })
        }
      }
    }
</script>

<style scoped>

</style>
